[レポート] フロントエンドウェブ開発者向けおよびモバイル開発者向け AWS Amplify 新機能紹介 #FWM308 #reinvent

アノテーション テクニカルサポートの川崎です。

本記事は AWS re:Invent 2022 のセッションレポートとなります。

概要

AWS Amplify は、フロントエンドのウェブおよびモバイル開発者が、最小限のクラウドの専門知識でフルスタック アプリケーションを数時間で構築するのに役立ちます。 このセッションでは、認証、データ、ストレージを使用してバックエンドを簡単に構成する方法など、Amplify の機能を探ります。 Amplify Studio でフロントエンド UI を作成します。 Amplify Hosting を使用して、静的およびサーバー側でレンダリングされた Web アプリをホストします。 Next.js のサポートを含む最近の Amplify の更新について学びます。 Web、デスクトップ、iOS/Android の Flutter サポートを増幅します。 AWS CDK で 175 以上の幅広い AWS サービスを使用し、ニーズの進化に合わせてデプロイ操作を変更できる拡張機能。

セッション動画

アジェンダ

• ウェブおよびモバイル開発業界の現状
• AWS Amplify とは
• フルスタック Web およびクロスプラットフォーム アプリの構築
• お客様が Amplify をどのように使用しているか
• 基礎となるアーキテクチャ

ここ数か月の間にリリースされた Amplify の新機能について説明

ウェブおよびモバイル開発業界の現状

会場聴講者 アンケート1

あなたはどのようなタイプの開発者ですか？

• フロントエンド
• バックエンド
• フルスタック (フロントエンド と バックエンド)
• 開発者ではない

会場聴講者 アンケート1 結果

フロントエンド開発者は広範な責任を負っている

• 俊敏性
  • 市場投入までの時間
  • 高速イノベーション
  • 一方通行のドアではない (元に戻せる、不可逆的ではない)
• 優れたエクスペリエンス
  • マルチデバイス
  • モダンなルック/フィール
  • 差別化された特徴
• プロダクションレディ
  • 低遅延
  • 安全
  • 信頼性と拡張性

↓ 技術的ニーズ

• フルスタック開発
  • デバイスとクラウドを利用した特徴
  • 統合された開発
  • 少ないボイラープレート(定形コード)
  • ベストプラクティスがビルトインされた
• Web
  • ネイティブのようなエクスペリエンス
  • クライアント/サーバー・レンダリングのサポート (例: Next.js)
• クロスプラットフォーム
  • 共通のコードベース
  • Flutter、React Native、Appleクロスプラットフォームのサポート

会場聴講者 アンケート2

あなたが開発しているアプリケーションの種類は？

• Web アプリ
• ネイティブのモバイルアプリ
• クロスプラットフォーム アプリ
• なし

会場聴講者 アンケート2 結果

AWS Amplify とは

• フルスタック開発
• アプリのUI構築
• アプリのホスティング
• バックエンドに接続

フルスタック Web およびクロスプラットフォーム アプリの構築

Let's build a fullstack food delivery platform

• 顧客がメニューを参照して注文するための Web アプリ
• ドライバー用のモバイル アプリ
  • ドライバーは注文を受け取り、配達する

Build an AWS backend

• プロビジョニング
  • コマンドライン
  • AWS コンソール
• ユースケースを実現
  • 認証
  • ファイルストレージ
• データスキーマをモデリング
  • 認可ルールを追加
  • データへのアクセスをきめ細かく制御

Modeling our data

• GraphQL の利点
  • 単一のエンドポイントを使用して必要なすべてのデータをやり取りできる
• レストラン・モデルの例
  • 2 つの認可ルールを追加
  • Public read access
  • 管理者のみが、変更を加えることができる

2つ目のモデル：注文モデル

• 注文モデルの例
  • サインインした顧客のみが、注文を create/read/update できる
  • 配達のために割り当てられたドライバーのみが、注文ステータス フィールドを変更できる
• モデル間の関係を設定
  • 注文
  • 顧客
  • レストラン

Initialize Amplify Project

• Amplify プロジェクトを初期化
  • CLI
  • AWS コンソール
• 後で構築する顧客向けアプリケーションと共通のバックエンド

Add API and Authentication to the backend

• バックエンドに追加
  • API
  • 認証

Data Modeling

• アプリのフォルダ
  • amplify という名前の自動生成されたフォルダ
  • schema.graphql ファイル

Push changes to the backend

• ローカル環境で行ったセットアップ
  • クラウド内の amplify プロジェクトに変更が適用されていない
• amplify push コマンドを実行
  • クラウド内の amplify プロジェクトに変更が適用される

Testing GraphQL APIs

• graphql API のテストを開始
• amplify console コマンド
  • Amplify Studio を開く
  • データモデルタブ
  • ローカルで作成したプロジェクトが、クラウド内の amplify プロジェクトに同期されている

Build an AWS backend: What's new

• GraphQL in Studio
  • Amplify Studio 上で自動生成APIに対してクエリを実行
• Real-time data
  • サーバーサイドフィルタリング
  • 特定のユーザーまたはグループにのみ更新を送信する
  • データをエンド ユーザー デバイスに選択的に同期
    • デバイスのローカル ストレージを節約
    • ネットワーク トラフィックを節約
  • コラボレーション型のアプリを簡単に作成
• In-app messages (アプリ内メッセージング)
  • セグメント化されたユーザにメッセージを送信
  • 顧客の行動に基づき、メッセージをトリガー
  • アプリで使用できる UI コンポーネントも提供

お客様が Amplify をどのように使用しているか

But is the backend production-ready?

• Amplify は2軸を両立
  • フロントエンド開発者のエクスペリエンス
  • 拡張性

• 作成した既存のリソースを変更
  • amplify override コマンド
• カスタムリソースを追加
  • amplify add custom コマンド
  • ネイティブに提供されていないカスタムリソースを追加
  • 175 を超える AWS サービスを活用できる
• Amplify バックエンドを CDK コンストラクトとしてエクスポート
  • amplify export コマンド
  • CI/CD パイプラインで使用可能に

Build web app UI

• figma (設計ツール)
  • React コンポーネントを生成
• Studio Form Builder
  • クラウドに接続されたフォームを構築
  • UI コンポーネントとしてアプリにプルする
• UI コンポーネントを提供
  • サインイン
  • いくつかの機能が登場予定

Built-in UI components

• 1つ目の方法
• ビルトインの UI コンポーネント
  • オーセンティケータ コンポーネントの例

Figma-imported UI components

• 2つ目の方法
• Figma を使用してUIを構築する
  • figma ファイルを Amplify Studio にインポート
  • 提供されているコンポーネントを確認可能

Form Builder

• 3つ目の方法
• フォーム ビルダー を使用してアプリに UI を追加

Amplify Studio Form Builder

• Forms for any API
  • API定義からフォームを生成
  • 新しいフォームをスクラッチから作成
• Design visually
  • 共通の検証ルールを視覚的に設定
• Extend via code
  • 検証ルールやフォームのスタイルを、コードを使いカスタマイズ可能

Host a web app

• フルマネージド・ホスティング
  • 静的/シングルページ（SPA）Webアプリケーション
  • ハイブリッドサーバ側レンダリング（SSR）アプリケーション
• GitベースのCI/CD機能
  • Amplify で作成されたバックエンドのデプロイ
• 最新のWebフレームワークをサポート
  • React、Next.js、Angular、Vue、Gatsby、Hugo、Jekyllなど

Fully managed hosting for server side rendered apps built with Next.js 13

• Next.js
  • ハイブリッド静的レンダリングとサーバレンダリング
  • インタラクティブ性と高速な初期ロード時間の両方をサポート
• ゼロコンフィグ・デプロイメント
  • ブラウザとサーバのコードにわたる単一の開発者エクスペリエンス
• バックエンドとの統合
  • Amplifyのバックエンドとシームレスに連携
  • Amplify Auth、Amplify API などのクライアント ライブラリを更新
  • ブラウザとクラウドの両方でまったく同じコードを使用できるようになる
• CloudWatch との統合
  • SSR アプリ (サーバーサイドレンダリング アプリ)
  • オブザーブ
  • モニタ
  • トラブルシューティング

Connect to an AWS backend

• Amplify ライブラリ や UI コンポーネント

• Amplify でプロビジョニングされたリソース、既存のリソース に接続

• ユースケース中心

  • 機能を簡単に使用できるよう API が宣言されている
• web やモバイル、クロスプラットフォーム をサポート
  • クロスプラットフォーム
  • Flutter
  • React Native

Setup Authentication

Integrate GraphQL API

Connect to an AWS backend: What's new

• Flutter
  • Dart でリライト
  • 共通のコードベースから、モバイル、デスクトップ、Webの各アプリを作成
• iOS
  • Swift でリライト
  • 共通のコードベースから、iOSとmacOSのアプリを作成
  • async/await の使用
• Android
  • Kotlin でリライト
  • ストレージおよび認証機能の改善
• Authenticator UIコンポーネント
  • Flutter
  • React Native

基礎となるアーキテクチャ

Underlying architecture - Customer

• webアプリのアセットを取得
• アプリにログイン
• メニューを参照して、注文する
• 自分の注文のみ、更新を取得

Underlying architecture - Driver

• アプリにログイン
• ドライバー自身に割り当てられた注文のみを取得、更新
• 新規注文のリアルタイム更新を取得

まとめ

AWS Amplify (再掲)

• フルスタック開発
• アプリのUI構築
• アプリのホスティング
• バックエンドに接続